function createHero(canvas,img,w,h,complateCallBack){
    var context = canvas.getContext('2d');
    var canvasW = canvas.width;
    var canvasH = canvas.height;

    var x = canvasW/2-w/2;
    var y = canvasH-h-10;

    var hero = new Hero(x,y,w,h,img,complateCallBack)

    document.onkeydown = function(event){
        var event = event || window.event;
        switch (event.keyCode) {
            case 37:hero.left = true
                break;
            case 38:hero.up = true
                break;
            case 39:hero.right = true
                break;
            case 40:hero.down = true
                break;
        }
    }
    document.onkeyup = function(event){
        var event = event || window.event;
        switch (event.keyCode) {
            case 37:hero.left = false
                break;
            case 38:hero.up = false
                break;
            case 39:hero.right = false
                break;
            case 40:hero.down = false
                break;
        }
    }

    timer = setInterval(function(){
        if(hero.left == true) hero.x -= 2
        if(hero.up == true) hero.y -= 2
        if(hero.right == true) hero.x += 2
        if(hero.down == true) hero.y += 2
    },10)

    return hero;

}

function move(canvas,image,w,h){
    var contentText = canvas.getContext('2d');
    var img = new Image()
    img.onload = function(){
        contentText.drawImage(img,0,canvas.height-h-10,w,h)
    }
    img.src=image
    var hero = new Hero(0,canvas.height-h-10,image,)
    document.onkeyup = function(event){
        var event = event || window.event;
        switch (event.keyCode) {
            case 37:bool = true
                break;
            case 38:
                break;
            case 39:
                break;
            case 40:
                break;
        }
    }
}

function Hero(x,y,w,h,img,complateCallBack) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.image = img;
}

